<!--患者列表-->
<template>
	<div>
		<el-tabs v-model="filter" @tab-click="handleClick" v-show="showTab">
			<el-tab-pane
					type="card"
					:key="item.name"
					v-for="(item, index) in editableTabs"
					:label="item.title+'['+item.total+']'"
					:name="item.filter"
			>

				<span slot="label" >
					<span class="big-ruit">{{item.total}}</span>
					<span class="font">{{item.title}}</span>
				</span>
			</el-tab-pane>
		</el-tabs>
		<div class="button-div" v-if="allowAdd">
			<el-button type="primary" icon="plus" @click="newpatient">新建患者病例</el-button>
		</div>
		<div style="clear:both;"></div>
		<wt-paged-table url="patients/get_patients" :initial-page="page" :total-size="currentTotal" :page-size="pageSize" :extra-params="extraParams" @page-loaded="onPageLoaded" :filter="filter">
			<el-table
					:data="pageData"
					stripe
					style="width: 100%"
					@row-dblclick="patientdetail"
			>
				<el-table-column
						min-width="70">
					<template scope="scope">
						<el-button @click="patientdetail(scope.row,scope.$index)" size="small">查看</el-button>
					</template>
				</el-table-column>
					<el-table-column
						prop="patientName"
						min-width="70"
						label="患者">
				</el-table-column>
				 <el-table-column
	                prop="diagnose"
	                label="诊断"
					min-width="160"	
	                >
	                <template scope="scope">
					    <div :title="scope.row.diagnose">
	                	 	{{scope.row.partDiagnose}}
	                	</div>
	                </template>
	       		</el-table-column>
				<el-table-column
						prop="patientGender"
						min-width="60"
						align="center"
						:formatter="showsix"
						label="性别">
				</el-table-column>
				<el-table-column
						prop="patientBirthday"
						min-width="100"
						align="center"
						:formatter="dateFormatdate"
						label="出生日期">
				</el-table-column>
				<el-table-column
						prop="patientId"
						label="病案号"
						min-width="100">
				</el-table-column>
				<el-table-column
						prop="mobile"
						label="最新联系方式"
						min-width="122">
				</el-table-column>
				<el-table-column
						prop="properties.lastHospitalizeDate"
						:formatter="dateFormat"
						label="最近入院时间"
						min-width="122">
				</el-table-column>
				<el-table-column
						prop="properties.lastHospitalizeAge"
						width="130"
						label="最近入院年龄">
				</el-table-column>
				<el-table-column
						prop="properties.caseCount"
						label="住院次数"
						width="100"
						align="center">
				</el-table-column>
		</el-table>
		</wt-paged-table>
	</div>
</template>
<script>
	import Vue from 'vue'
	import WtPagedTable from '../../../Resources/components/wt-paged-table'
    import times from '../../../Resources/utils/wt-time-utils'
    import gender from '../../../Resources/utils/wt-form-utils'
	import ElementUI from 'element-ui'
	import Permission from 'winged/utils/wt-permission';
    Vue.use(ElementUI);
    Vue.component(WtPagedTable.name, WtPagedTable)
	export default {
		name: 'wt-patients-list',
		props:{
			filters: {
				type: Object,
				required: true
			},
			patients: {
				type: Array,
				required: true
			},
			page: {
				type: Number,
				default: 0
			},
			total: {
				type: Number,
				required: true
			},
			pageSize: {
				type: Number,
				required: true
			},
			// 用于请求查询的额外参数数据，通常是_token
			extraParams: {
				type: Object,
				default: {}
			},
            showTab:{
                type: Boolean,
                default: true
			}
		},
		data() {
			return {
				// 当前页的列表数据
				pageData: this.patients,
				// 当前的filter
				filter: null,
				currentTotal: this.total,
                editableTabs: [{
                    title: '所有患者',
                    filter: null,
					total:this.filters['depart']
                }, {
                    title: '男性患者',
                    filter: 'male',
					total:this.filters['male']
                },{
                    title: '女性患者',
					filter: 'female ',
					total:this.filters['female']
                },{
                    title: '老人60+',
                    filter: '65plus',
					total:this.filters['65+']
                },{
                    title: '儿童12-',
                    filter: 'blow12',
					total:this.filters['12-']
                }],
				allowAdd: Permission.checkPermission('patient-case-add')
			};
		},
		methods: {
			onPageLoaded: function(data) {
				this.pageData = this.builder(data);
			},
			/*
			 *给pageData添加diagnose和partDiagnose两个字段,partDiagnose为部分诊断结果，用于ui显示，避免过长			 
			 * */
			builder(data){
				data.forEach((item,index) => {
					var len = 30;//期望显示的诊断名字符长度
					var diagnose_names = item.properties.diagnose_names
					var diagnose_names_joined = diagnose_names.reduce((a,b) => {
						if(!b) return
						if(!/\[/.test(b)){
							return a + b + ';'
						}
						var nov = JSON.parse(b)
						return a  + nov.reduce((c,d,index) => {
							if(index == nov.length - 1) return c + d
                            return c + d.trim() + ' / '
						},'').trim() + " ; "
					},'')

					//完整诊断名
					data[index].diagnose = diagnose_names_joined
					if(diagnose_names_joined.length <= len){//长度小于len,则显示全部
                        var partDiagnose = diagnose_names_joined
					}else{//长度大于len，并且截取后的字符串末尾诊断名不完整，则去掉不完整部分，并加上省略号
						var partDiagnose = diagnose_names_joined.substr(0,len - 1).match(/[^\/,^;]*[\;,\/]/g).join('')
						if(diagnose_names_joined.replace(/\s;\s?/,'') != partDiagnose){	
							partDiagnose += '...'
						}
					}
					partDiagnose = partDiagnose.replace(/[;/]...$/,'...')
					//部分诊断名
					data[index].partDiagnose = partDiagnose
				})
				return data
			},
            handleClick(tab, event) {
			    for (var i=0; i<this.editableTabs.length; i++){
			        if (this.filter == 0||this.filter == null){
                        this.currentTotal = this.filters['depart'];
                        break;
					}else {
                    if (this.editableTabs[i].filter == this.filter){
                        this.currentTotal = this.editableTabs[i].total;
                        break;
                    }
                    }
				}
            },
            dateFormat:function (row, column) {
				var arr = column.property.split('.') ;
				var date = row[arr[0]][arr[1]];
				if (date == "") {
					return "";
				}
				return times.format(date, 'date')
			},
			dateFormatdate:function (row, column) {
				var date = row[column.property];
				return times.format(date, 'date')
			},
            showsix:function(row, column){
                var six = row[column.property];
                return gender.formatGender(six);
            },
            patientdetail:function (row,index) {
                window.location.href=`/admin/patients/show?case_id=${row.patientCaseId}&patient_id=${row.patientId}`
            },
            newpatient:function () {
                window.location.href=`/admin/patients/case/create`
            },
            casedetail:function (row,index) {
                window.location.href=`/admin/patients/${row.patientId}/detail`
            }

		},
	}

</script>
<style >
	.button-div{
		padding-bottom: 0.5rem;
		float:right;
	}
	.big-ruit{
		width: 3.2rem;
		height: 3.2rem;
		border-radius: 50%;
		border:solid #20a0ff 5px;
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 1rem!important;
	}
	@media screen and (min-width:1366px){
	    .big-ruit{
			width: 2.8rem;
			height: 2.8rem;
			border-radius: 50%;
			border:solid #20a0ff 5px;
			float: left;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			font-size: 1rem!important;
		}
		.el-tabs__item{
			margin-bottom:0.7rem!important
		}
	}
	@media screen and (max-width:1366px){
		.el-tabs__item{
			margin-bottom:1.2rem!important
		}
	}
	.font{
		margin-left: 8px!important;
		height: 50px;
		line-height: 50px;
	}
	
	.el-tabs__header{
		margin-bottom:0.5rem;
	}
</style>